<template>
	<view class="trading">
		<view class="header">
			<view class="left">
				<!-- <view class="text1" v-if="current == 0" @click="guizhi()">查看规则</view> -->
				<!-- <view class="text1" v-if="current == 1" @click="master()">{{isZdanzhang?'站长大厅':'申请成为站长'}}</view> -->
				<!-- <view class="text1" @click="master()">站长大厅</view> -->
			</view>
			<view class="middle">
				<view class="middle_left" @click="tabSelect(0)">
					<view class="text1">{{tab[0]}}</view>
				</view>
				<!-- <view class="middle_left" @click="tabSelect(1)"> -->
				<!-- <view class="text1" :class="current ==1?'action':''">{{tab[1]}}</view> -->
				<!-- </view> -->
			</view>
			<!-- 	<view class="right" @click="release()">
				<view class="text1">我要发布</view>
			</view> -->
		</view>
		<!-- <template v-if="current == 0"> -->
		<view class="black_8">
			<view class="left">
				<view class="text1">{{info.count_hold_num}}</view>
				<view class="text2">求购总数(ZY)</view>
			</view>
			<!-- <image class="imgs" src="/static/qieh.png"></image> -->
			<!-- <view class="left">
					<view class="text1">{{info.count_usdt_num}}</view>
					<view class="text2">总量USDT</view> -->
			<!-- <view class="text3" @click="guizhi">规则</view> -->
			<!-- </view> -->
		</view>
		<!-- </template> -->
		<!-- <template v-else>
			<view class="black_8">
				<view class="left">
					<view class="text1">{{info.count_gasoline_num}}</view>
					<view class="text2">当前汽油</view>
				</view>
				<image class="imgs" src="/static/qieh.png"></image>
				<view class="left">
					<view class="text1">{{info.usdt_value_num}}</view>
					<view class="text2">当前USDT</view>

				</view>
			</view>
		</template> -->
		<view class="black_3">
			<view class="left">日成交量：{{info.day_deal_num}}</view>
			<view class="right">今日单价：{{info.today_unit_price}}</view>
		</view>
		<view class="chat">
			<view class="content1">
				<view class="chart" :prop="dayCharts" :change:prop="echarts.updateEchartsDay" id="main"
					:style="{ width: '99%', height: '340rpx' }">
				</view>
			</view>
			<!-- <view class="left_top">
				今日价格{{today_unit_price}}
			</view>
			<view class="right_bottom">
				今日成交量{{day_deal_num}}
			</view> -->
		</view>
		<view class="black_4">
			<template v-for="(item,index) in tab2">
				<view class="left" @click="tabSelect2(item,index)" :class="index_tab2 == index?'action':''">{{item}}
				</view>
			</template>
		</view>

		<view class="black_5" v-if="index_tab2 != 2">
			<!-- <view class="left" @click="selectPayType()">
				<view class="line_1">
					<view class="text1">支付方式</view>
					<image class="img"
						:src="'/static/tading/'+(isPayType?'shanjiao_select':'shanjiao_noselect')+'.png'">
					</image>
				</view>
				<view class="payTypeList" :class="isPayType?'action1':''">
					<template v-for="(item,index) in payTypeList">
						<view class="pItem" @click="selectPayTypeList(item)">
							<image class="image1" :src="item.url"></image>
							<text class="pt_text1">{{item.name}}</text>
							<uni-icons style="checkbox-filled" size="20" color="#FE903D"></uni-icons>
						</view>
					</template>
				</view>
			</view> -->
			<!-- <view  class="left" @click="selectQujian()"> -->
			<!-- 	<view class="line_1">
					<view class="text1">区间</view>
					<image class="img" :src="'/static/tading/'+(isQujian?'shanjiao_select':'shanjiao_noselect')+'.png'">
					</image>
				</view>
				<view class="payTypeList" :class="isQujian?'action2':''">
					<template v-for="(item,index) in qujianList">
						<view class="pItem" @click="selectQujianList(item)">
							<text class="pt_text1">{{item}}</text>
							<uni-icons style="checkbox-filled" size="20" color="#FE903D"></uni-icons>
						</view>
					</template>
				</view>
			</view> -->
			<view class="left" @click="selectNum()">
				<view class="line_1">
					<view class="text1">{{num}}</view>
					<image class="img" :src="'/static/tading/'+(isNum?'shanjiao_select':'shanjiao_noselect')+'.png'">
					</image>
				</view>
				<view v-if="isNum" class="payTypeList">
					<!-- <view class="pItem" @click.stop="selectQujianList('全部')">
						<text class="pt_text1">全部</text>
						<uni-icons v-if="num == '全部'" type="checkbox-filled" size="25" color="#FE903D"></uni-icons>
					</view> -->
					<template v-for="(item,index) in tab3">
						<view class="pItem" @click.stop="selectQujianList(item)">
							<text class="pt_text1">{{item}}</text>
							<uni-icons v-if="num == item" type="checkbox-filled" size="25" color="#FE903D"></uni-icons>
						</view>
					</template>
				</view>
			</view>
			<view class="left middle" @click="selectPirce()">
				<view class="line_1">
					<view class="text1">单价</view>
					<image class="img" :src="'/static/tading/'+(isPrice?'xiala_shang':'xiala_xia')+'.png'"></image>
				</view>
			</view>
			<view class="right" @click="toTransactin()">
				<view class="text1">交易列表</view>
				<!-- <uni-icons type="right" size="15" color="#FE903D"></uni-icons> -->
			</view>
		</view>

		<view class="black_7" v-else>
			<template v-for="(item,index) in tab5">
				<view class="text1" :class="index == index_tab5?'action':''" @click="tabSelect5(item,index)">
					{{item}}
					<view class="text2" :class="index == index_tab5 ? 'tab_indicator' :''"></view>
				</view>

			</template>
		</view>

		<view class="black_6">
			<template v-for="(item,index) in list">
				<view class="item" @click="pay1(0,item)">
					<view class="left">
						<!-- <view class="line_1" v-if="index2 !=2">
							<image class="img" src="/static/logo.png"></image>
							<text class="text3">幸运小羊羊</text>
						</view> -->
						<view class="line_1">
							<text class="text1">数量:</text>
							<text class="text2">{{item.num}}</text>
							<text class="text1">{{current == 1?'个':'ZY'}}</text>
						</view>
						<view class="line_1">
							<text class="text1">总价:</text>
							<text class="text2">{{item.total_price}}</text>
							<text class="text1">{{current == 1?'ZY':'元'}}</text>
						</view>
						<view class="line_1" v-if="index_tab2 ==2">
							<view class="text1">时间：</view>
							<uni-dateformat :date="item.add_time*1000" format="yyyy-MM-dd hh:mm:ss">
							</uni-dateformat>
						</view>
						<view class="line_1" v-if=" current == 0">
							<template v-for="(itempay,indexpay) in item.collections">
								<image class="pay_img" :src="'/static/tading/'+itempay.type+'.png'"></image>
							</template>
						</view>

					</view>
					<view class="right">
						<view class="line_1" v-if="index_tab2!=2">
							<text class="text1">成单量:</text>
							<text
								class="text2">{{item.count_trade_inf.finish_num}}/{{item.count_trade_inf.finish_raio}}%</text>
						</view>
						<view class="line_1">
							<text class="text1">{{current == 1?'Z':'¥'}}</text>
							<text class="text3">{{item.unit_price}}</text>
							<text class="text1">/ 单价</text>
						</view>
						<view class="line_1 line_2" v-if="index_tab2 ==1">
							<view class="text4">立即购买</view>
						</view>
						<view class="line_1 line_2" v-if="index_tab2 ==0">
							<view class="text4 text5">出售</view>
						</view>
						<view class="line_1 line_2" v-if="index_tab2 ==2">
							<view class="text4" :class="getRightBtClass(item)" @click="cancal(item.id)">
								{{getRightBt(item)}}
							</view>
						</view>

					</view>
				</view>

			</template>
		</view>
		<view>
					<!-- 提示窗示例  this.$refs.alertDialog.open()-->
			<uni-popup ref="alertDialog" type="dialog">
				<uni-popup-dialog type="success" cancelText="取消" confirmText="确认" title="是否取消" content="是否取消求购" @confirm="dialogConfirm"
					@close="dialogClose"></uni-popup-dialog>
			</uni-popup>
		</view>
		<gonggao ref="gonggao"></gonggao>

		<addUShang ref="addUShang" :success="addUShangSucess"></addUShang>
		<economyPay ref="economyPay" :success="economyPaySucess"></economyPay>
		<rule ref="rule"></rule>
	</view>

</template>

<script>
	import gonggao from '../../components/zmessage/gonggao.vue'
	
	import addUShang from '@/components/addUShang/addUShang.vue'
	import economyPay from '@/components/pay/economyPay.vue'
	import rule from '@/components/rule/rule.vue'
	export default {
		components: {
			addUShang,
			economyPay,
			rule,
			gonggao
		},
		data() {
			return {
				id:'',
				current: 0,
				tab: ["交易大厅", "加油站"],
				index_tab2: 0,
				index_tab3: 0,
				index_tab4: 0,
				index_tab5: 0,
				tab2: ["我要卖", "我要买", "我的发布"],
				tab3: ["全部", "20~100", "100~500", "500~5000"],
				// tab3: ["全部", "25", "50", "75", "100", "125", "150"],
				tab6: ["全部", "50", "100", "150", "200", "250", "300"],
				tab4: ["ZY", "汽油"],
				tab5: ['我的买单', '我的卖单'],
				payType: ['wechat.png', 'alipay.png', 'ysf.png', 'usdt.png', 'bank.png'],
				list: [{
					unit_price: 100,
					total_price: 1000,
					num: 110,
					status: 0,
					collections: [{
							"id": 1294,
							"type": "bank"
						},
						{
							"id": 1295,
							"type": "ysf"
						},
						{
							"id": 1296,
							"type": "usdt"
						},
						{
							"id": 1297,
							"type": "usdt"
						},
						{
							"id": 1298,
							"type": "wechat"
						},
						{
							"id": 1299,
							"type": "alipay"
						}
					]

				}],
				page: 1,
				info: {
					"today_unit_price": "0",
					"day_deal_num": 0,
					"count_hold_num": 0,
					"count_gasoline_num": 0,
					"count_usdt_num": 0
				},
				sell_v1_ratio: 0.0,
				sell_v2_ratio: 0.0,
				isPrice: false,
				isNum: false,
				num: '数量',
				isZdanzhang: false,
				user: {
					"id": 0,
					"n_id": "",
					"mobile": "",
					"p_id": 0,
					"nickname": "中应交易所",
					"avatar": "",
					"is_auth": 0,
					"level": 0,
					"accounts": [{
							"type": "usdt",
							"amount": "0.00"
						},
						{
							"type": "gasoline",
							"amount": 0
						},
						{
							"type": "debris",
							"amount": 0
						},
						{
							"type": "speed_up",
							"amount": 0
						}
					],
					gasoline_multiple_num: 0,
					usdt_multiple_num: 0,

				},
				dayCharts: [],
				edition: {
					describe: '',
					edition_url: '', //apk、wgt包下载地址或者应用市场地址  安卓应用市场 market://details?id=xxxx 苹果store itms-apps://itunes.apple.com/cn/app/xxxxxx
					edition_force: 0, //是否强制更新 0代表否 1代表是
					package_type: 0, //0是整包升级（apk或者appstore或者安卓应用市场） 1是wgt升级
					edition_issue: 1, //是否发行  0否 1是 为了控制上架应用市场审核时不能弹出热更新框
					edition_number: 100, //版本号 最重要的manifest里的版本号 （检查更新主要以服务器返回的edition_number版本号是否大于当前app的版本号来实现是否更新）
					edition_name: '1.0.0', // 版本名称 manifest里的版本名称
					edition_silence: 0, // 是否静默更新 0代表否 1代表是
				},
			};
		},
		onShow() {
			this.api.http.requests('common/webSetting', {}, res => {
				this.sell_v1_ratio = res.data.sell_v1_ratio
				this.sell_v2_ratio = res.data.sell_v2_ratio
				this.usdt_multiple_num = res.data.usdt_multiple_num
				this.gasoline_multiple_num = res.data.gasoline_multiple_num
				//申请站长缴纳费用
				// uni.setStorageSync('site_apply_amount', res.data.apply_site.site_apply_amount)
				//申请站长规则
				// uni.setStorageSync('site_apply_rule', res.data.apply_site.site_apply_rule)
				// uni.setStorageSync('usdt_issue_rule', res.data.usdt_issue_rule)
				// this.notice_open(res.data.notice_content)
				if (res.data.notice_open) {
					var notice_content = uni.getStorageSync('notice_content')
					if (notice_content != res.data.notice_content) {
						uni.setStorageSync('notice_content', res.data.notice_content)
						setTimeout(this.notice_open(res.data.notice_content), 2000)
					}
				}
				
				setTimeout(this.update, 2000)
			}, "POST")
			this.list.length = 0
			this.getList()
			this.getListCount()
			this.zdanzhang()
			this.getInfo()
		},
		onLoad() {


		},
		methods: {
			notice_open(notice_content) {
				this.$refs.gonggao.open(notice_content)
			},
			update() {
				//#ifdef APP-PLUS
				var that = this
				var form = uni.getSystemInfoSync().platform
				if (form == 'ios') {
					return
				}
				// 获取本地应用资源版本号
				plus.runtime.getProperty(plus.runtime.appid, (inf) => {
					if (that.edition) {
						if (Number(that.edition.edition_number) > Number(inf.versionCode)) {
							uni.navigateTo({
								url: '/uni_modules/rt-uni-update/components/rt-uni-update/rt-uni-update?obj=' +
									JSON.stringify(that.edition)
							});
						}
					}
				});
				//#endif
			
			},
			
			guizhi() {
				this.$refs.rule.open('usdt_issue_rule')
			},
			selectQujianList(item) {
				this.isNum = !this.isNum
				this.num = item
				// console.lo
				this.onclicktab2(this.index_tab2)
			},
			selectNum() {
				this.isNum = !this.isNum
			},
			selectPirce() {
				this.isPrice = !this.isPrice
				this.onclicktab2(this.index_tab2)
			},
			getPayTypeList(item) {
				if (!item)
					return
				var list = []
				var type = ''
				item.forEach((res) => {
					if (res.type == type) {} else {
						if (res.type == 'usdt' && type == '') {
							type = 'usdt'
						}
						list.push(res)
					}
				})
				return list
			},
			onclicktab2(index) {
				this.index_tab2 = index
				var item = this.index_tab2 == 2 ? this.tab4[0] : this.tab3[0]
				// console.log(item)
				this.tabSelect2(item, this.index_tab2);

			},
			getRightBtClass(item, index) {
				if (this.index_tab2 == 0) {
					return "text3"
				} else if (this.index_tab2 == 1) {
					return "text4"
				} else if (this.index_tab2 == 2) {
					if (item.status == 0) {
						return "text5"
					} else if (item.status == -1) {
						return "text7"
					} else if (item.status == 4) {
						return "text8"
					}
					return "text6"
				}
			},
			getRightBt(item, index) {

				if (this.index_tab2 == 0) {
					return "出售"
				} else if (this.index_tab2 == 1) {
					return "购买"
				} else if (this.index_tab2 == 2) {
					// console.log(22222,item.status)
					//0：取消发布(调用取消订单接口)，-1：已取消，4：已成交
					if (item.status == 0) {
						return "取消发布"
					} else if (item.status == -1) {
						return "已取消"
					} else if (item.status == 4) {
						return "已成交"
					}
					return ""
				}
			},
			publish() {
				this.custom.tool.jump(0, 'trading/publish')
			},
			tabSelect2(item, index) {
				this.index_tab2 = index;
				this.list.length = 0
				this.page = 1
				this.getList()
			},
			tabSelect(index) {
				// this.current = index
				// this.index_tab2 = this.in
				// this.list.length = 0
				// this.page = 1
				// this.getListCount()
				// this.tabSelect2({}, this.index_tab2);
			},
			tabSelect4(item, index) {

			},
			tabSelect5(item, index) {

				this.index_tab5 = index
				this.list.length = 0
				this.page = 1
				this.getList()
			},
			myPurchase() {
				this.custom.tool.jump(0, 'trading/myPurchase')
			},
			getListCount() {

				this.api.http.requests('exchange/listCount', {
					// account_type: this.current == 0 ? 'usdt' : 'gasoline',
					type: this.index_tab2 == 1 ? 'sell' : 'buy'
				}, res => {
					// console.log(res)
					if (res.data) {
						this.info = res.data
						this.getEchartsDay(res.data.list)
					}

				}, "POST")
			},
			getList() {
				var type1 = 'buy'
				if (this.index_tab2 == 1) {
					type1 = 'sell'
				}
				let data = {
					// account_type: this.current == 0 ? 'usdt' : 'gasoline',
					type: type1,
					page: this.page
				}

				if (this.index_tab2 == 2) {
					//选择我的求购时需要重新设置买卖类型 index_tab5
					type1 = this.index_tab5 == 1 ? 'sell' : 'buy'
					data.type = type1
				} else {
					if (this.num == '数量' || this.num == '全部') {
						data.nums = 'all'
					} else {
						data.nums = this.num
					}
				}
				this.api.http.requests(this.index_tab2 == 2 ? 'exchange/myRelease' : 'exchange/tradeList', data, res => {
					// console.log(res)
					if (res.data && res.data.length > 0) {
						this.list = this.list.concat(res.data)
					}

				}, "POST")
			},
			pay1(type, item) {
				let data = {
					total_price: item.total_price,
					num: item.num,
					id: item.id
				}
				//LLB市场购买需要选择支付类型
				if (this.index_tab2 == 1 && this.current == 0) {
					// this.$refs.payList.open(0,item.collections,data)

					uni.navigateTo({
						url: '/pages/trading/placeAnOrder?type=' + this.index_tab2 + '&data=' + JSON.stringify(
							item)
					})
				} else if (this.index_tab2 == 2) {
					if (item.status == 0) {
						this.id = item.id
						this.$refs.alertDialog.open()
						//取消求购
						
					}
				} else {
					// var type = this.index_tab2 == 0?3:4
					// this.$refs.economyPay.open(type, item.id, item.total_price)
					var type = this.index_tab2 == 0 ? 4 : 3
					var type2 = this.current == 0 ? 1 : 2
					var total_price = item.total_price + "ZY"
					if (this.current == 0) {
						if (this.index_tab2 == 0) {
							total_price = item.num + "ZY"
						}
					} else {
						if (this.index_tab2 == 0) {
							total_price = item.num + 'ZY'
						}
					}

					this.$refs.economyPay.open2(type, item.id, total_price,item.total_price * (this.sell_v1_ratio / 100))
					// //出售榴莲和出售LLB和购买榴莲
					// this.$refs.pay.open(this.index_tab2, this.current,this.sell_v2_ratio, data)
				}
			},
			addUShangSucess() {
				// var site_apply_amount = uni.getStorageSync('site_apply_amount')
				// this.$refs.economyPay.open(0, 0, site_apply_amount)
			},
			economyPaySucess(password) {

				this.api.http.requests('site/apply', {
					pay_password: password
				}, res => {
					uni.showToast({
						title: res.msg
					})
					this.zdanzhang()
					this.page = 1
					this.list.length = 0
					this.getList()
				}, "POST")
			},
			cancal(id) {
				this.api.http.requests('exchange/cancel', {
					id: id
				}, res => {
					uni.showToast({
						title: res.msg
					})
					this.page = 1
					this.list.length = 0
					this.getList()
				}, "POST")
			},
			zdanzhang() {
				// this.api.http.requests('site/info', {}, res => {
				// 	this.isZdanzhang = res.data.apply_time == '--' ? false : true
				// }, "POST")
			},
			master() {
				// this.$refs.addUShang.open()
				if (this.isZdanzhang) {
					uni.navigateTo({
						url: '/pages/trading/stationMasterHall'
					})
				} else {
					this.$refs.addUShang.open()
				}
				// uni.navigateTo({
				// 	url: '/pages/trading/stationMasterHall'
				// })

			},
			release() {
				uni.navigateTo({
					url: '/pages/trading/releaseTrading'
				})
			},
			toTransactin() {
				uni.navigateTo({
					url: '/pages/trading/transactionList'
				})
			},
			getInfo() {
				var that = this;
				this.api.http.requests('user/info', {}, res => {
					that.user = res.data
				}, "POST")
			},
			getAccounts(type) {
				var amount = '0.00'
				this.user.accounts.forEach((item) => {
					if (type == item.type) {
						amount = item.amount
						return amount
					}
				})
				return amount
			},
			getEchartsDay(arr) {



				let arrs1 =[]
				let arrs2 =[]
				for (var i = 0; i < arr.length; i++) {
					arrs2.length = 0
					let j = (i == arr.length -1 ? i-1: i+1)
					let sg = arr[j].price//今天的收盘价格
					let kg = arr[i].price//开盘价格
					// let rand = Math.random() * (arr[j].price * 0.1)
					let zg = Math.abs( sg - rand )
					let dg = Math.abs( kg - rand )
					let rand = Math.abs(sg - kg)
				   // 10  15  5
				   // 2  10-2 15+2 17 - 8  9 5
					if(sg > kg){
						let rand1=Math.floor(Math.random() * rand) + 1
						zg =Math.abs (sg - rand1)
						dg =Math.abs( kg - rand1)
					}else {
						let rand1=Math.floor(Math.random() * rand) + 1
						zg =Math.abs (kg - rand)
						dg = Math.abs(sg - rand1)
					}
					// let zg = zg - rand//最高
					//涨 收盘-开盘 > 最高-最低 反则 跌
					let ar = [arr[i].day,kg,zg,dg,sg,Math.random() * 1000]
					// arrs2.push(arr[i].day)
					// arrs2.push(arr[i].price)
					// arrs2.push(arr[i].price+rand)
					// arrs2.push(arr[i].price -rand1)
					// arrs2.push(arr[j].price+rand2)
					// arrs2.push(arr[j].price)
					console.log(ar)
					arrs1.push(ar)
					console.log(arrs1)
				}
				
				// arr.forEach((v, index) => {
				// 	arrs2.length = 0
				// 	arrs2.push(v.day)
				// 	let rand = Math.random() * 100
				// 	arrs2.push(v.price)
				// 	arrs2.push(v.price)
				// 	arrs2.push(v.price)
				// 	arrs2.push(v.price)
				// 	arrs2.push(v.price)
				// 	arrs1.push(arrs2)
				// })
				this.dayCharts = arrs1
				console.log(111111,this.dayCharts )
					
			},
			dialogConfirm() {
				this.api.http.requests('exchange/cancel', {
					id: this.id
				}, res => {
				
					uni.showToast({
						title: res.msg,
						icon: 'none'
					})
					this.page = 1
					this.list.length = 0
					this.getList()
				}, "POST")			
			},
						
			dialogClose() {
					
			},
		},
		onReachBottom() {
			this.page++;
			this.getList()
		}
	}
</script>
<style>
	page {
		background-color: white;
	}
</style>
<style scoped lang="less">
	.header {
		background-color: #FE903D;
		display: flex;
		justify-content: space-between;
		padding: 10px 10px 10px 10px;
		align-items: center;
		//#ifdef APP-PLUS
		padding: 40px 10px 10px 10px;

		//#endif
		.left {
			.text1 {
				font-size: 25rpx;
				font-weight: bold;
				color: #FE903D;
				text-align: center;
				background: #FFFFFF;
				padding: 2px 5px;
				border-radius: 28rpx;
			}

		}

		.middle {
			margin: auto;
			display: flex;
			text-align: center;

			.middle_left {
				font-size: 32rpx;
				font-weight: 400;
				color: #FFFFFF;
				margin: 0px 10px;

				.text1 {
					padding: 5px 0px;
				}

				.action {
					border-bottom: 1px solid #FFFFFF;
				}
			}
		}

		.right {
			font-size: 28rpx;
			font-weight: 400;
			color: #FFFFFF;

			.text1 {}
		}
	}

	.black_1 {

		text-align: center;
		background-color: #FE903D;
		font-size: 63rpx;
		font-weight: 400;
		color: #FFFFFF;
		padding: 50px 0px 0px 0px;

	}

	.black_2 {
		text-align: center;
		font-size: 30rpx;
		font-weight: 400;
		color: #FFE6D5;
		padding-top: 10rpx;
		background-color: #FE903D;
	}

	.black_3 {
		display: flex;
		justify-content: space-between;
		padding: 20px 30px;
		background-color: #FE903D;
		font-size: 25rpx;
		font-weight: 400;
		color: #FFFFFF;
	}


	.black_4 {
		display: flex;
		justify-content: space-between;
		background-color: white;
		padding-top: 1px;
		font-size: 28rpx;
		font-weight: 400;
		color: #969696;

		text-align: center;

		.left {
			width: 33%;
			padding: 5px 0px;
		}

		.action {
			background: #FE903D;
			color: white;
		}
	}

	.black_5 {
		position: relative;
		// padding: 10px;
		font-size: 28rpx;
		font-weight: 400;
		color: #969696;
		display: flex;
		width: 100%;
		background: #F4F4F4;
		align-items: center;
		align-content: space-between;
		text-align: center;

		.left {

			align-items: center;
			padding: 2px 0px;

			.line_1 {
				// background-color: #262626;
				display: flex;
				align-items: center;
				padding: 5px 10px 5px 30px;
				text-align: center;
				margin: auto;

				.text1 {
					// margin: auto;
				}

				.img {
					// margin: auto;
					margin-right: 10px;
				}
			}

			.payTypeList {
				// display: none;
				position: absolute;
				width: 100%;
				height: auto;
				padding-bottom: 400px;
				background-color: #00000050;
				z-index: 999;

				// border-bottom-left-radius: 5px;
				// border-bottom-right-radius: 5px;
				.pItem {
					// background-color: red;
					display: flex;
					padding: 10px 20px;
					align-items: center;
					background-color: white;
					justify-content: space-between;
				}

			}

			.action1 {
				display: block;
			}

			.action2 {
				display: block;
			}

			.action3 {
				display: block;
			}
		}

		.img {
			margin-left: 5px;
			width: 10px;
			height: 10px;
		}

		.middle {
			flex: 1;
		}

		.right {
			display: flex;
			margin-right: 5px;
			align-items: center;
			font-size: 28rpx;
			font-weight: bold;
			color: #ffffff;
			text-align: center;

			.text1 {
				padding: 1px 5px;
				border-radius: 5px;
				background-color: #FE903D;
			}
		}
	}

	.black_6 {

		// padding: 10px  0px;
		.item {
			padding: 10px 10px;
			display: flex;
			justify-content: space-between;
			border-bottom: 2rpx solid #ECECEC;
			align-items: center;

			.left {
				.line_1 {
					font-size: 25rpx;
					font-weight: 400;
					color: #969696;
					margin-bottom: 5px;
					display: flex;
					align-items: center;

					.img {
						vertical-align: middle;
						width: 25px;
						height: 25px;
						border-radius: 50%;
						margin-right: 5px;
					}

					.text2 {
						font-size: 25rpx;
						font-weight: 800;
						color: #262626;
						padding: 0px 10px;
					}

					.text3 {
						font-size: 28rpx;
						font-weight: 800;
						color: #333333;
					}

					.pay_img {
						width: 15px;
						height: 15px;
						margin-right: 5px;
					}
				}
			}

			.right {
				text-align: end;

				.line_1 {
					font-size: 25rpx;
					font-weight: 400;
					color: #969696;
					margin-bottom: 5px;

					.text2 {

						color: #262626;

					}

					.text3 {
						font-size: 49rpx;
						font-weight: 800;
						color: #FE903D;
					}

					.text4 {
						text-align: center;
						background: #FFFFFF;
						border-radius: 4rpx;
						padding: 2px 8px;
						// width: 80px;
						border: 1rpx solid #FE903D;
						font-size: 25rpx;
						font-weight: 400;
						color: #FE903D;
					}

					.text4_action {
						color: #969696;
						border: 1rpx solid #ECECEC;
					}

				}

				.line_2 {
					display: flex;
					justify-content: end;

					.text5 {
						margin: auto 0px auto auto;
						background: #FE903D;
						color: white;
					}

					.text8,
					.text7 {
						color: #666666;
						border: 0rpx solid #FE903D;
					}
				}
			}
		}
	}

	.black_7 {
		display: flex;

		.text1 {
			margin: 20px 00px 0px 30px;
		}

		.action {
			font-size: 28rpx;
			font-weight: 400;
			color: #FE903D;
		}

		.text2 {
			margin: 5px auto;
		}

		.tab_indicator {
			// margin:10px auto ;
			width: 80rpx;
			height: 5rpx;
			background: #FE903D;
		}
	}

	.black_8 {
		display: flex;
		justify-content: space-between;
		// padding: 10px 20px;
		text-align: center;
		background-color: #FE903D;
		// padding: 20px 0px 0px 0px;

		.left {
			flex: 1;
			font-size: 63rpx;
			font-weight: 400;
			color: #FFFFFF;

			.text2 {
				font-size: 30rpx;
				font-weight: 400;
				color: #FFE6D5;
				margin-top: 10px;
			}

			.text3 {
				width: 60px;
				margin: auto;
				text-align: center;
				border-radius: 5px;
				background-color: #3B61FF;
				font-size: 26rpx;
				font-weight: 400;
			}

		}

		.imgs {
			width: 25px;
			height: 25px;
			margin: auto auto 0px auto;
		}

	}

	.chat {
		position: relative;
		// height: 150px;
		// background-color: #fff;
		// background: url('../../static/trading/chat_bg.png') no-repeat;
		background-size: 100% 100%;
		margin: 0px 10px;

		.left_top {
			position: absolute;
			background: #4F84DC;
			border-radius: 3px 3px 3px 3px;
			font-size: 16px;
			font-weight: 400;
			color: #FFFFFF;
			padding: 2px 5px;
			top: 10px;
			left: 10px;
		}

		.right_bottom {
			position: absolute;
			font-size: 16px;
			font-weight: 400;
			color: #5878E8;
			right: 10px;
			bottom: 5px;
		}
	}
</style>

<script module="echarts" lang="renderjs">
	let myChart, dayChart
	export default {
		mounted() {
			if (typeof window.echarts !== 'function') {
				// 动态引入较大类库避免影响页面展示
				const script = document.createElement('script')
				// view 层的页面运行在 www 根目录，其相对路径相对于 www 计算
				// script.src = 'static/echarts.js'
				//script标签的onload事件都是在外部js文件被加载完成并执行完成后才被触发的
				// script.onload = this.initEcharts.bind(this)
				document.head.appendChild(script)
				var Things = ["js/echarts.min.js", "js/qs.js", "js/axios.js", "js/vue.js", "js/mock.js"]
				for (var i = 0; i < Things.length; i++) {
					const script = document.createElement('script')
					script.src = "static/" + Things[i]
					document.head.appendChild(script)
				}
			
				
			}
		},
		created() {
			// this.getTxData()
			// this.getDepth()
		},
		data() {
			return {
				MA5: '',
				MA10: '',
				MA30: '',
				volMA5: '',
				volMA10: '',
				current: 1,
				tabs: [
					// {'label':'1分钟','value':1},
					// {'label':'15分钟','value':2},
					// {'label':'30分钟','value':3},
					// {'label':'1小时','value':4},
					// {'label':'4小时','value':5},
					// {'label':'1天','value':6},
				],
				category: 1,
				categoryList: [
					// {'label':'深度','value':1},
					// {'label':'成交','value':2},
					// {'label':'简介','value':3},
				],
				txData: {}, //交易数据统计
				buyList: [],
				sellList: [],
				dealHis: [],
				tokenInfo: {},
				page: 1,
			}
		},
		methods: {
			updateEcharts(newValue, oldValue, ownerInstance, instance) {
				// 监听 service 层数据变更  
				this.initEcharts(newValue)
				// console.log(newValue, 'week')
			},
			updateEchartsDay(newValue, oldValue, ownerInstance, instance) {
				// 监听 service 层数据变更  
				this.initEchartsDay(newValue)
				
			},
			
			initEchartsDay(newValue) {
				if(!myChart )
				myChart = echarts.init(document.getElementById('main'));
				
				rawData = newValue
				console.log(rawData)
				this.draw()
				this.getKline()
			},
			// 获取24小时交易数据统计
			getTxData(){
				// this.txData=txData;
			},
			// 获取k线数据,生成k线
			getKline(){
				var dates = rawData.map(function(item) {
					return item[0];
				});
				var data = rawData.map(function(item) {
					return [+item[1], +item[2], +item[3], +item[4], +item[5]];
				});
				var volumes = rawData.map(function(item, index) {
					return [index, item[5], item[1] > item[2] ? 1 : -1];
				});
				var dataMA5 = this.calculateMA(5, data);
				var dataMA10 = this.calculateMA(10, data);
				var dataMA30 = this.calculateMA(30, data);
				var volumeMA5 = this.calculateMA(5, volumes);
				var volumeMA10 = this.calculateMA(10, volumes);
				console.log("getKline data",data)
				console.log("getKline dates ",dates)
				myChart.setOption({
					xAxis: [
						{
							data: dates
						},
						{
							data: dates
						}
					],
					series: [
						{
							name: '日K',
							data: data
						},
						// {
						// 	name: 'MA5',
						// 	data: dataMA5
						// },
						// {
						// 	name: 'MA10',
						// 	data: dataMA10
						// },
						// {
						// 	name: 'MA30',
						// 	data: dataMA30
						// },
						// {
						// 	name: 'Volume',
						// 	data: volumes
						// },
						// {
						// 	name: 'VolumeMA5',
						// 	data: volumeMA5
						// },
						// {
						// 	name: 'VolumeMA10',
						// 	data: volumeMA10
						// },
					]
				})
			},
			// 列表条数不足补全
			addItem(list,type){
				// type: 1开头加，2末尾加
				list=list || [];
				let len=20-list.length;
				if(len>0){
					for(let i=0;i<len;i++){
						if(type==1){
							list.unshift({})
						}else{
							list.push({})
						}
					}
				}
				return list;
			},
			// 获取深度数据
			getDepth(){
				// this.buyList=this.addItem(depthList().buyList || []);
				// this.sellList=this.addItem(depthList().sellList || []);
			},
			// 获取成交记录
			getDealHis(){
				// this.dealHis=dealHis();
			},
			// 获取项目简介信息
			getTokenInfo(){
				// this.tokenInfo=tokenInfo;
			},
			
			// 切换tab
			switchTab(val){
				if(this.current==val) return;
				this.current=val;
				this.getKline()
			},
			// 切换类目
			switchCategory(val){
				if(this.category==val) return;
				this.category=val;
				if(this.category==1){
					this.getDepth()
				}else if(this.category==2){
					this.getDealHis()
				}else{
					this.getTokenInfo()
				}
			},
			// 截取数字字符串 保留precision小数
			formatterNum(value, precision) {
				// console.log(value)
				let reg = new RegExp('^\\d+(?:\\.\\d{0,' + precision + '})?')
				return value.toString().match(reg)
			},
			// 计算MA
			calculateMA(dayCount, data) {
				var result = [];
				for (var i = 0, len = data.length; i < len; i++) {
					if (i < dayCount) {
						result.push('-');
						continue;
					}
					var sum = 0;
					for (var j = 0; j < dayCount; j++) {
						sum += data[i - j][1];
					}
					// console.log(sum, dayCount)
					result.push((sum / dayCount).toFixed(2));
				}
				return result;
			},
			// 绘制(配置项)
			draw(){
				let that=this;
				var upColor = '#03ad91';
				var downColor = '#dd345b';
				var colorList = ['#c23531', '#2f4554', '#61a0a8', '#d48265', '#91c7ae', '#749f83', '#ca8622', '#bda29a', '#6e7074',
					'#546570', '#c4ccd3'
				];
				var labelFont = 'bold 12px Sans-serif';
				let MarkData = []
				for (var i = 0; i < rawData.length; i++) {
					MarkData.push({
						name: 'Mark',
						coord: [rawData[i][0], rawData[i][1]],
						value: rawData[i][1],
						itemStyle: {
							color: 'rgb(41,60,85)'
						}
					})
				}
				var option = {
					backgroundColor: '#FFFFFF',
					title: {
						show: false
					},
					legend: {
						show: false
					},
					visualMap: {
					            show: false,
					            seriesIndex: 10,
					            dimension: 2,
					            pieces: [{
					                value: 1,
					                color: downColor
					            }, {
					                value: -1,
					                color: upColor
					            }]
					        },
					grid: [{
							top: '5%',
							left: 20,
							right: 20,
							height: '70%'
						},
						{
							top: '60%',
							left: 20,
							right: 20,
							height: '16%'
						},
					],
					axisPointer: { //坐标轴指示器配置项
						link: {
							xAxisIndex: 'all'
						},
						label: {
							backgroundColor: '#0d1723',
							color: '#fff',
							borderColor: 'rgb(99, 117, 139)',
							borderWidth: 1,
							borderRadius: 2,
							fontSize: 10
						}
					},
					xAxis: [{
						type: 'category', //坐标轴类型。(value:数值轴，适用于连续数据。,category:类目轴，适用于离散的类目数据,time: 时间轴，适用于连续的时序数据,log:对数轴。适用于对数数据)
						data: dates, //类目数据，在类目轴（type: 'category'）中有效。
						scale: false,
						boundaryGap: true, //坐标轴两边留白策略，类目轴和非类目轴的设置和表现不一样。
						axisLine: {
							show: true,
						}, //坐标轴轴线相关设置
						axisTick: {
							show: false
						}, //坐标轴刻度相关设置。
						axisLabel: {
							show: false,
						}, //坐标轴刻度标签的相关设置。
						splitLine: {
							show: false,
							lineStyle: {
								color: 'rgba(255,255,255, 0.1)'
							}
						}, //坐标轴在 grid 区域中的分隔线。
						min: 'dataMin', //坐标轴刻度最小值。可以设置成特殊值 'dataMin'，此时取数据在该轴上的最小值作为最小刻度。
						max: 'dataMax', //坐标轴刻度最大值。可以设置成特殊值 'dataMax'，此时取数据在该轴上的最大值作为最大刻度。
						axisPointer: {
							label: {
								margin: 0
							}
						},
					}, {
						type: 'category',
						gridIndex: 1, //x 轴所在的 grid 的索引，默认位于第一个 grid。
						data: [], //类目数据，在类目轴（type: 'category'）中有效。
						scale: true,
						boundaryGap: true, //坐标轴两边留白策略，类目轴和非类目轴的设置和表现不一样。
						axisLine: {
							show: true,
							lineStyle: {
								color: 'rgba(255,255,255,1)',
								width: 1
							}
						}, //坐标轴轴线相关设置
						axisTick: {
							show: true
						}, //坐标轴刻度相关设置。
						axisLabel: { //坐标轴刻度标签的相关设置。
							show: true,
							margin: 6,
							fontSize: 10,
							color: 'rgba(99, 117, 139, 1.0)',
							// formatter: function(value) {
							// 	return echarts.format.formatTime('MM-dd', value);
							// }
						},
						splitNumber: 20,
						splitLine: {
							show: true,
							lineStyle: {
								color: 'rgba(255,255,255, 0.1)'
							}
						}, //坐标轴在 grid 区域中的分隔线。
						min: 'dataMin', //坐标轴刻度最小值。可以设置成特殊值 'dataMin'，此时取数据在该轴上的最小值作为最小刻度。
						max: 'dataMax', //坐标轴刻度最大值。可以设置成特殊值 'dataMax'，此时取数据在该轴上的最大值作为最大刻度。
						// axisPointer: { show: true, type: 'none', label: { show: false }},
					}],
					yAxis: [{
						type: 'value', //坐标轴类型。(value:数值轴，适用于连续数据。,category:类目轴，适用于离散的类目数据,time: 时间轴，适用于连续的时序数据,log:对数轴。适用于对数数据)
						position: 'left', //y 轴的位置。'left','right'
						scale: false, //是否是脱离 0 值比例。设置成 true 后坐标刻度不会强制包含零刻度。在双数值轴的散点图中比较有用。(在设置 min 和 max 之后该配置项无效。)
						axisLine: {
							show: false
						}, //坐标轴轴线相关设置。
						axisTick: {
							show: false,
							inside:false
						}, //坐标轴刻度相关设置。
						axisLabel: { //坐标轴刻度标签的相关设置。
							show: true,
							rotate: 0,
							textStyle: {
								color: '#666666'
							},
							inside: false,
							fontSize: 8,
							// formatter: function(value) {
							// 	return Number(value).toFixed(2)
							// }
						},
						splitLine: {
							show: true,
							lineStyle: {
								type: "dashed", //设置网格线类型 dotted：虚线   solid:实线
								width: 0.2,
								color:"#666666"
							}
						}, //坐标轴在 grid 区域中的分隔线。
					}, {
						type: 'value',
						position: 'left',
						scale: true,
						gridIndex: 1,
						axisLine: {
							show: false
						},
						axisTick: {
							show: false
						},
						axisLabel: {
							show: false
						},
						splitLine: {
							show: false
						}
					}],
				
					animation: false, //是否开启动画。
					color: colorList,
					tooltip: {
						show: false, //是否显示提示框组件，包括提示框浮层和 axisPointer。
						trigger: 'axis', //触发类型。item,axis,none
						formatter(params){
							let tooltip = '';
							let time = '', open = 0, high = 0, low = 0, close = 0, amount = 0;
							for (var i = 0; i < params.length; i++) {
								if (params[i].seriesName === '日K') {
									time = params[i].name;
									open = params[i].data.length > 1 ? Number(that.formatterNum(params[i].data[1], 2)) : 0;
									close = params[i].data.length > 1 ? Number(that.formatterNum(params[i].data[2], 2)) : 0;
									low = params[i].data.length > 1 ? Number(that.formatterNum(params[i].data[3], 2)) : 0;
									high = params[i].data.length > 1 ? Number(that.formatterNum(params[i].data[4], 2)) : 0;
									amount = params[i].data.length > 1 ? Number(that.formatterNum(params[i].data[5], 2)) : 0;
									// console.log(time,open,close,low,high,amount)
									tooltip = '<div class="charts-tooltip">' +
										'<div class="charts-tooltip-row"><div class="ctr-label">' + '时间' + '</div><div class="ctr-value">' + time + '</div></div>' + 
										'<div class="charts-tooltip-row"><div class="ctr-label">' + '开' + '</div><div class="ctr-value">' + open + '</div></div>' + 
										'<div class="charts-tooltip-row"><div class="ctr-label">' + '高' + '</div><div class="ctr-value">' + high + '</div></div>' + 
										'<div class="charts-tooltip-row"><div class="ctr-label">' + '低' + '</div><div class="ctr-value">' + low + '</div></div>' + 
										'<div class="charts-tooltip-row"><div class="ctr-label">' + '收' + '</div><div class="ctr-value">' + close + '</div></div>' + 
										'<div class="charts-tooltip-row"><div class="ctr-label">' + '数量' + '</div><div class="ctr-value">' +amount + '</div></div></div>';
								}
								if (params[i].seriesName === 'MA5') {
									that.MA5 = params[i].data !== 'NAN' ? Number(that.formatterNum(params[i].data, 2)) : 0
								}
								if (params[i].seriesName === 'MA10') {
									that.MA10 = params[i].data !== 'NAN' ? Number(that.formatterNum(params[i].data, 2)) : 0
								}
								if (params[i].seriesName === 'MA30') {
									that.MA30 = params[i].data !== 'NAN' ? Number(that.formatterNum(params[i].data, 2)) : 0
								}
								if (params[i].seriesName === 'VolumeMA5') {
									that.volMA5 = params[i].data !== 'NAN' ? Number(that.formatterNum(params[i].data, 2)) : 0
								}
								if (params[i].seriesName === 'VolumeMA10') {
									that.volMA10 = params[i].data !== 'NAN' ? Number(that.formatterNum(params[i].data, 2)) : 0
								}
							}
							return tooltip;
						},
						triggerOn: 'click', //提示框触发的条件 'mousemove','click','mousemove|click','none'
						textStyle: {
							fontSize: 10
						}, //提示框浮层的文本样式
						backgroundColor: 'rgba(30,42,66,0.8);', //提示框浮层的背景颜色。
						borderColor: '#2f3a56', //提示框浮层的边框颜色。
						borderWidth:2,
						position: function(pos, params, el, elRect, size) { //提示框浮层的位置，默认不设置时位置会跟随鼠标的位置。
							var obj = {
								top: 20
							};
							obj[['left', 'right'][+(pos[0] < size.viewSize[0] / 2)]] = 10;
							return obj;
						},
						axisPointer: { //坐标轴指示器配置项。
							label: {
								color: 'rgba(255,255,255,.87)',
								fontSize: 9,
								backgroundColor: '#020204',
								borderColor: "#9c9fa4",
								shadowBlur: 0,
								borderWidth: 0.5,
								padding: [4, 2, 3, 2],
							},
							animation: false,
							type: 'cross',
							lineStyle: {
								color: {
									type: 'linear',
									x: 0,
									y: 0,
									x2: 0,
									y2: 1,
									colorStops: [{
										offset: 0,
										color: 'rgba(30, 42, 66, 0.1)' // 0% 处的颜色
									}, {
										offset: 0.7,
										color: 'rgba(30, 42, 66,0.9)' // 100% 处的颜色
									}, {
										offset: 1,
										color: 'rgba(30, 42, 66,0.2)' // 100% 处的颜色
									}]
								},
								width: 10,
								shadowColor: 'rgba(30, 42, 66,0.7)',
								shadowBlur: 0,
								shadowOffsetY: 68,
							}
						}
					},
				
					dataZoom: [{ //用于区域缩放
						type: 'inside',
						xAxisIndex: [0, 1],
						realtime: false,
						start: 0,
						end: 100,
					}
					],
					series: [
						{
							type: 'candlestick',
							name: '日K',
							data: [],
							      barWidth: '20%',

							itemStyle: {
								color: upColor,
								color0: downColor,
								borderColor: upColor,
								borderColor0: downColor,
							},
							markPoint: {
								symbol: 'rect',
								symbolSize: [-10, 0.5],
								symbolOffset: [5, 0],
								itemStyle: {
									show: true, 
									color: '#FE903D'
								},
								label: {
									show: true, 
									color: '#FE903D',
									offset: [10, 0],
									fontSize: 10,
									align: 'bottom',
									formatter: function(params) {
										return Number(params.value).toFixed(2)
									}
								},
								data: MarkData
							},
						}, 
						{
							name: 'MA5',
							type: 'line',
							data: [],
							symbol: 'none',//去除圆点
							smooth: true,
							lineStyle: { normal: { opacity: 1, width: 1, color: "#eef4ba" } },
							z: 5
						}, 
						{
							name: 'MA10',
							type: 'line',
							data: [],
							symbol: 'none',//去除圆点
							smooth: true,
							lineStyle: { normal: { opacity: 1, width: 1, color: '#83c1c5' } },
							z: 4
						},
						{
							name: 'MA30',
							type: 'line',
							data: [],
							symbol: 'none',//去除圆点
							smooth: true,
							lineStyle: { normal: { opacity: 1, width: 1, color: '#b39cd8' } },
							z: 3
						},
						{
								name: 'Volume',
								type: 'bar',
								xAxisIndex: 1,
								yAxisIndex: 1,
								data: []
							},
							{
								name: 'VolumeMA5',
								type: 'line',
								xAxisIndex: 1,
								yAxisIndex: 1,
								data: [],
								symbol: 'none',//去除圆点
								smooth: true,
								lineStyle: { normal: { opacity: 1, width: 1, color: "#eef4ba" } },
								z: 5
							},
							{
								name: 'VolumeMA10',
								type: 'line',
								xAxisIndex: 1,
								yAxisIndex: 1,
								data: [],
								symbol: 'none',//去除圆点
								smooth: true,
								lineStyle: { normal: { opacity: 1, width: 1, color: '#83c1c5' } },
								z: 4
							},
					]
				};
				
				myChart.setOption(option);
				// 加载上一页数据
				myChart.on('datazoom',function(params){
					let num=params.batch[0]['start'];
					if(num==0){
						console.log('到最左边了')
					}
				})
				window.addEventListener('resize', () => { myChart.resize()})
				}
		}
	}
</script>

<style lang="scss" scoped>
	/deep/ .u-popup__content {
		border-radius: 12rpx;
	}

	/deep/ .u-toolbar__title>span {
		font-weight: 600 !important;
	}

	.weekdata {
		// margin: 20rpx;
		background-color: #FFFFFF;
		border-radius: 12rpx;
		// padding: 36rpx 30rpx;
		font-weight: 600;
		color: #333333;
		font-size: 32rpx;

		.header {
			display: flex;
			justify-content: space-between;
		}

	}
</style>